<template>
    <div class="kb">
        <div class="flex-center">
            <div class="kb-input kb-input__ul" @tap="showKeyboard">
                <div :style="textArr.length === 1? 'border-color:#24c6dc' : 'border-color:#cccccc'" class="kb-input__li">{{textBaseArr[0]}}</div>
                <div :style="textArr.length === 2? 'border-color:#24c6dc' : 'border-color:#cccccc'" class="kb-input__li">{{textBaseArr[1]}}</div>
                <div :style="textArr.length === 3? 'border-color:#24c6dc' : 'border-color:#cccccc'" class="kb-input__li">{{textBaseArr[2]}}</div>
                <div :style="textArr.length === 4? 'border-color:#24c6dc' : 'border-color:#cccccc'" class="kb-input__li">{{textBaseArr[3]}}</div>
                <div :style="textArr.length === 5? 'border-color:#24c6dc' : 'border-color:#cccccc'" class="kb-input__li">{{textBaseArr[4]}}</div>
                <div :style="textArr.length === 6? 'border-color:#24c6dc' : 'border-color:#cccccc'" class="kb-input__li">{{textBaseArr[5]}}</div>
                <div :style="textArr.length === 7? 'border-color:#24c6dc' : 'border-color:#cccccc'" class="kb-input__li">{{textBaseArr[6]}}</div>
                <div :style="textArr.length === 8? 'border-color:#24c6dc' : 'border-color:#cccccc'" class="kb-input__li" :class="isEnergy ? 'kb-input__new-energy' : ''" @tap="energy(7)">{{textBaseArr[7]}}</div>
            </div>
        </div>

        <div class="kb-keyboard">
            <div class="kb-keyboard__over row-wrap" v-show="show" @tap="closeKeyboard"></div>
            <div class="kb-keyboard__panle row-wrap kb-keyboard__panle-style" v-show="show">
                <!--省份简写键盘-->
                <div v-show="!isAlph" v-for="proItem in province " :key="proItem" @tap="tapKeyboard" :data-val="proItem" class="kb-keyboard__td kb-keyboard__td-theme" hover-class="kb-keyboard__td-tap-theme" :hover-start-time="0" :hover-stay-time="40">{{proItem}}</div>

                <!--数字键盘-->
                <button v-show="isAlph" v-for="numItem in natural " :key="numItem" @tap="tapKeyboard" :data-val="numItem" class="kb-keyboard__td-num kb-keyboard__td-theme" hover-class="kb-keyboard__td-tap-theme" :hover-start-time="0" :hover-stay-time="40" :disabled="!isNum">{{numItem}}</button>

                <!--字母键盘-->
                <div v-show="isAlph" v-for="alItem in 'QWERTYUPASDFGHJKLZX-CVBNM' " :key="alItem" @tap="tapKeyboard" :data-val="alItem" class="kb-keyboard__td-num kb-keyboard__td-theme" hover-class="kb-keyboard__td-tap-theme" :hover-start-time="0" :hover-stay-time="40">
                    <text v-if="alItem === '-'" class="kb-keyboard__del"></text>
                    <text v-else>{{alItem}}</text>
                </div>

                <!-- 完成按钮 -->
                <div v-if="isAlph && textArr.length > 6" @tap="tapFinished" class="kb-keyboard__td-finished kb-keyboard__finished" hover-class="kb-keyboard__td-tap-fin-theme" :hover-start-time="0" :hover-stay-time="60">{{extraKey}}</div>
                <div v-if="isAlph && textArr.length < 7" class="kb-keyboard__td-finished kb-keyboard__finished-base">{{extraKey}}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        show: {
            type: Boolean,
            default: false
        },
        province: {
            type: String,
            default:
                '京津沪冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤川青藏琼宁渝'
        },
        natural: {
            type: String,
            default: '1234567890'
        },
        baseBorder: {
            type: String,
            default: '#cccccc'
        },
        activeBorder: {
            type: String,
            default: '#ff7149'
        },
        extraKey: {
            type: String,
            default: '完成'
        },
        plateNum: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            isNum: false,
            isAlph: false,
            isEnergy: true,
            textBaseArr: ['', '', '', '', '', '', '', ''],
            textArr: [],
            tapVal: ''
        };
    },
    computed: {},
    methods: {
        showKeyboard() {
            this.$emit('update:show', true);
        },
        closeKeyboard() {
            this.$emit('update:show', false);
        },
        tapKeyboard(e) {
            this.tapVal = e.currentTarget.dataset.val;
            if (this.tapVal === '-') {
                this.textArr.pop();
                this.textBaseArr.splice(this.textArr.length, 1, '');
                if (
                    this.textArr.length === 7 &&
                    !this.isEnergy &&
                    this.tapVal !== ''
                ) {
                    this.isEnergy = true;
                    this.tapVal = '';
                }
            } else {
                if (this.textArr.length > 7) return false;
                if (this.textArr.length > 6 && this.isEnergy) {
                    this.textBaseArr.splice(6, 1, this.tapVal);
                    this.textArr.splice(6, 1, this.tapVal);
                    return false;
                }
                this.textArr = [...this.textArr, this.tapVal];
                this.textBaseArr.splice(
                    this.textArr.length - 1,
                    1,
                    this.tapVal
                );
                this.$emit('update:plateNum', this.textArr.join(''));
            }

            if (this.textArr.length === 1) {
                this.isAlph = true;
                this.isNum = false;
            } else if (this.textArr.length === 0) {
                this.isAlph = false;
                this.isNum = false;
            } else {
                this.isNum = true;
            }
            this.$emit('update:plateNum', this.textArr.join(''));
        },
        tapFinished(e) {
            let textValue = this.textArr.join('');
            this.$emit('keyboard', textValue);
        },
        energy(index) {
            if (index === 7 && this.isEnergy && this.textArr.length === 7) {
                this.isEnergy = false;
            }
        }
    },
    mounted() {}
};
</script>
<style>
.kb {
    width: 100%;
}
.kb-input {
    width: 100%;
    height: 60px;
    font-size: 18px;
    position: relative;
    top: 50px;
}
.kb-input__ul {
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    width: 92%;
    height: 60px;
    z-index: 999;
}
.kb-input__li {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    width: 34px;
    height: 50px;
    border: 2px solid #cccccc;
    border-radius: 4px;
    background-color: #ffffff;
}
.kb-input__active {
    border: 1px solid #24c6dc;
}
.kb-input__new-energy {
    width: 36px;
    height: 50px;
    background: url();
    background-size: 100% 100%;
    border: none;
    border-radius: 5px;
}

.kb-keyboard {
    width: 100vw;
    background-color: #ffffff;
}

.kb-keyboard__over {
    z-index: 888;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.kb-keyboard__panle {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    z-index: 999;
}
.kb-keyboard__panle-style {
    border-bottom: 8px solid #eaf1f9;
    border-top: 10px solid #eaf1f9;

    --from: #eaf1f9;
    --to: #eaf1f9;

    background: linear-gradient(130deg, var(--from), var(--to));
    background: -webkit-linear-gradient(130deg, var(--from), var(--to));
}
.kb-keyboard__td {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    width: calc((100vw - 4px) / 9);
    font-size: 18px;
    height: 48px;
    margin: 2px;
    border-radius: 5px;
}
.kb-keyboard__td-num {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    width: calc((100vw - 4px) / 12);
    font-size: 18px;
    height: 48px;
    margin: 2px;
    border-radius: 5px;
}
.kb-keyboard__td-finished {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    width: 110px;
    height: 48px;
    margin-top: 2px;
    margin-left: 10px;
    font-size: 18px;
    border-radius: 5px;
}
.kb-keyboard__del {
    width: 100%;
    height: 100%;
    background: url();
    background-size: 100% 100%;
}
.kb-keyboard__finished {
    border: 1px solid #2f62ed;
    background-color: #2f62ed;
    color: #ffffff;
}
.kb-keyboard__finished-base {
    border: 1px solid #cdd0d5;
    background-color: #cdd0d5;
    color: #1e1e1e;
}
.kb-keyboard__td-theme {
    border: 1px solid #cdd0d5;
    color: #1e1e1e;
    box-shadow: 3px 3px 1px #cdd0d5;
    -webkit-box-shadow: 3px 3px 1px #cdd0d5;
    background: #fff;
}
.kb-keyboard__td-tap-theme {
    border: 1px solid #cdd0d5;
    color: #1e1e1e;
    --from: #e5e2e2;
    --to: #e5e5e5;

    background: linear-gradient(130deg, var(--from), var(--to));
    background: -webkit-linear-gradient(130deg, var(--from), var(--to));
}
.kb-keyboard__td-tap-fin-theme {
    border: 1px solid #cdd0d5;
    color: #fff;
    --from: #cdd0d5;
    --to: #b8b8b9;

    background: linear-gradient(130deg, var(--from), var(--to));
    background: -webkit-linear-gradient(130deg, var(--from), var(--to));
}

.flex-center {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
}

.row-wrap {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}
</style>
